<template>
  <div class="element-side-selector">
    <div class="selector-header">
      <Icon class="header-icon" icon="fa-solid:laptop"/>
      <text class="header-text">布局组件</text>
      <text class="header-tip">点击组件添加至布局区</text>
    </div>
    <!--  卡片列表-->
    <div v-for="group in groupList" :key="group.label" class="group-zone">
      <div class="group-title">
        {{ group.label }}
      </div>
      <div class="group-list">
        <ScreenElementType
          v-for="element in group.children"
          :key="element.type"
          class="list-item"
          :icon="element.icon"
          :label="element.label"
          @click="handleClickElement(element)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScreenElementType from '@/views/yz/screenelement/ScreenElementType.vue'
import {ref} from 'vue'

const groupList = ref([
  {
    label: '基本',
    children: [
      {
        label: '文字',
        icon: 'ep:chat-line-round',
        type: 'text',
        formData: () => ({
          content: '这里是文字'
        })
      },
      {
        label: '图',
        icon: 'ep:picture',
        type: 'image',
        formData: () => ({
          style: JSON.stringify({
            backgroundColor: 'red'
          })
        })
      },
      // {
      //   label: '背景',
      //   icon: 'ep:picture-filled',
      //   type: 'background',
      //   formData: {
      //     type: 'background',
      //     style: {
      //       backgroundColor: '#fff'
      //     },
      //     content: {}
      //   }
      // }
    ]
  },
  {
    label: '高级',
    children: [
      {
        label: '海为XBOX参数',
        icon: 'ep:connection',
        type: 'interactiveText',
        formData: () => ({
          content: '例如：{{五合一_温度}}℃'
        })
      }
    ]
  }
])
const formData = () => ({
  name: undefined,
  type: undefined,
  style: undefined,
  layer: undefined,
  ruleJsonStr: undefined,
  stateArrayStr: undefined,
  content: undefined,
  screenId: undefined,
  boxObj: {
    x: 0,
    y: 0,
    h: 100,
    w: 100
  }
})
const emits = defineEmits(['elementClick'])
// 点击元素，通知父组件元素被点击
const handleClickElement = (element) => {

  emits('elementClick', {
    ...formData(),
    ...element.formData(),
    name: element.label,
    type: element.type
  })
}
</script>

<style scoped lang="scss">
.element-side-selector {
  box-sizing: border-box;
  padding: 0 20px;
  width: 340px;

  .selector-header {
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: 1px #f3f3f8 solid;
  }

  .header-icon {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #b0bee6;
  }

  .header-text {
    margin-right: 16px;
    color: #555a7a;
    font-weight: bold;
    font-size: 18px;
  }

  .header-tip {
    color: #555a7a;
    font-size: 14px;
  }

  .group-zone {
    padding: 16px 0;
  }

  .group-title {
    margin-top: 8px;
    color: #b0bee6;
  }

  .group-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .list-item {
    margin: 8px 6px;
  }
}
</style>
